<template>
  <div class="visualBlock" style="z-index:100">
    <div class="title-header">
      <div class="left-menu" @click="$router.history.go(-1)"><i class="iconfont icon-left"></i></div>
      <div class="title center">登记表</div>
      <div class="extras" @click="reset()">重置</div>
    </div>
    <div class="main-scroll scrollBody" style="">
      <div class="divwrap" v-if="showSsxPick">
      <v-distpicker type="mobile" @province="onChangeProvince1" @city="onChangeCity" @area="onChangeArea"
      :province="ssxObject.province" :city="ssxObject.city" :area="ssxObject.area"></v-distpicker>
    </div>
      <div class="title1">一、房屋信息</div>
      <div class="ryc1" style="border-bottom: none;">
        <label class="require">房屋地址:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" readonly v-model="item.address" placeholder="选择和填写下列相关项，自动生成">
        </div>
      </div>
      <div class="ryc1" style="flex-wrap:wrap;">
        <div class="inxxx">
          <select class="search_select" v-model="address_1" @change="updateAddress">
            <option value="">请选择小区或道路</option>
            <option value="渡江一村">渡江一村</option>
            <option value="渡江二村">渡江二村</option>
            <option value="渡江三村">渡江三村</option>
            <option value="渡江四村">渡江四村</option>
            <option value="渡江路">渡江路</option>
            <option value="石牌路">石牌路</option>
            <option value="大河港西路">大河港西路</option>
            <option value="石牌一村">石牌一村</option>
            <option value="石牌二村">石牌二村</option>
            <option value="石牌三村">石牌三村</option>
            <option value="石牌四村">石牌四村</option>
          </select>
        </div>
        <template v-if="address_1.includes('路')">
          <div class="inxxx">
            <input type="text" v-model="address_2" placeholder="请输入门牌" @input="updateAddress">
            <span>号</span>
          </div>
        </template>
        <template v-if="address_1.includes('村')">
          <div class="inxxx">
            <select class="search_select" v-model="address_3" @change="updateAddress">
              <option value="">请选择幢</option>
              <option :value="q" v-for="(q,i) in zhuangArr" :key="i">{{q}}</option>
            </select>
            <span>幢</span>
          </div>
          <div class="inxxx">
            <input type="text" v-model="address_4" placeholder="请输入门牌" @input="updateAddress">
            <span>室</span>
          </div>
          <div class="flex-item" style="min-width: 80px;">
            <input type="checkbox" name="cheku" value="1" v-model="address_5" @change="updateAddress">
            <span>车库</span>
          </div>
        </template>

      </div>
      <div class="ryc1">
        <label>房东姓名:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" v-model="item.fdxm" placeholder="请输入">
        </div>
      </div>
      <div class="ryc1">
        <label>房东电话:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" v-model="item.fddh" placeholder="请输入">
        </div>
      </div>
      <div class="title1">二、住户信息</div>
      <div class="ryc1">
        <label class="require">姓名:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" v-model="item.xm">
        </div>
      </div>
      <div class="ryc1">
        <label class="require">身份证:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" v-model="item.sfz">
        </div>
      </div>
      <div class="ryc1">
        <label class="require">户籍地址:</label>
        <div class="ryc2" @click="showSsxPicker(item)">
          <input type="text" class="ryc_txt" readonly placeholder="点击选择" v-model="item.hjdz">
        </div>
      </div>
      <div class="ryc1">
        <label class="require">电话:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" v-model="item.dh">
        </div>
      </div>
      <div class="ryc1">
        <label>单位:</label>
        <div class="ryc2">
          <input type="text" class="ryc_txt" v-model="item.dw">
        </div>
      </div>
      <div class="title1">三、同行人员</div>
      <!--遮罩层-->
      <div class="blacks" v-if="showSsxPick" @click="showSsxPick = false"></div>
      <div class="persons">
        <template v-for="(person, index) in item.txry">
          <div class="person" :key="index">
            <div class="ryc1">
              <label class="require" style="min-width:80px;">关系：</label>
              <div class="ryc2 selectDiv">
                <select class="search_select" v-model="person.prelation">
                  <option value="">请选择</option>
                  <option :value="q" v-for="(q,i) in options" :key="i">{{q}}</option>
                </select>
              </div>
            </div>
            <div class="ryc1">
              <label class="require">姓名:</label>
              <div class="ryc2">
                <input type="text" class="ryc_txt" v-model="person.xm">
              </div>
            </div>
            <div class="ryc1">
              <label class="require">身份证:</label>
              <div class="ryc2">
                <input type="text" class="ryc_txt" v-model="person.sfz">
              </div>
            </div>
            <div class="ryc1">
              <label class="require">户籍地址:</label>
              <div class="ryc2" @click="showSsxPicker(person)">
                <input type="text" class="ryc_txt" readonly placeholder="点击选择" v-model="person.hjdz">
              </div>
            </div>
            <div class="ryc1">
              <label>电话:</label>
              <div class="ryc2">
                <input type="text" class="ryc_txt" v-model="person.dh">
              </div>
            </div>
            <div class="ryc1">
              <label>单位:</label>
              <div class="ryc2">
                <input type="text" class="ryc_txt" v-model="person.dw">
              </div>
            </div>
            <div class="ryc5">
              <input type="button" value="删除此人" class="ryc_btn" @click="deletePerson(index)">
            </div>
          </div>
        </template>
      </div>
      <div class="ryc4">
        <input type="button" value="新增同行人员" class="ryc_btn" @click="addNewPerson">
      </div>
      <!-- <div class="backText"><b>注:</b><br>1. 本表用于2020年1月5日以后离开武汉出差等停留过的人员。<br>2. 若为在武汉常住人员，请填写现住址，如为外来短暂停留人员，请填写酒店名称及地址。<br>3. 乘坐火车或飞机的，请同时填写车次/航班号、座位号。</div> -->
      <div class="ryc3">
        <input type="button" value="提交" class="ryc_btn" @click="save()">
      </div>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker';
import { XButton, Popup, PopupPicker } from 'vux';
export default {
  name: "Add3",
  components: {
    XButton, Popup, PopupPicker, VDistpicker
  },
  data () {
    var zhuangArr = Array.from({length: 50}, (v, k) => k + 1);
    return {
      showSsxPick: false,
      ssxObject: {province: '', city: '', area: ''},
      options: ["夫", "妻", "子", "女婿", "女", "儿媳", "孙子", "孙女", "外孙子", "外孙女", "父亲", "母亲", "祖父", "祖母", "外祖父", "外祖母", "兄弟姐妹", "其他亲属", "非亲属"],
      address_1: '',
      address_2: '',
      address_3: '',
      address_4: '',
      address_5: [],
      zhuangArr: zhuangArr,
      item: {
        address: '',
        fdxm: '',
        fddh: '',
        xm: '',
        sfz: '',
        dh: '',
        dw: '',
        hjdz: '',
        pid: '',
        prelation: '',
        ssxObject: {province: '', city: '', area: ''},
        txry: [
        ]
      }
    };
  },
  methods: {
    updateAddress: function () {
      if (this.address_1.includes('路')) {
        this.item.address = this.address_1 + (this.address_2 || '?') + '号';
      } else {
        this.item.address = this.address_1 + (this.address_3 || '?') + '幢' + (this.address_4 || '?') + '室' + (this.address_5.length ? '（车库）' : '');
      }
    },
    showSsxPicker: function (person) {
      this.currentPerson = person;
      this.ssxObject = person.ssxObject;
      this.showSsxPick = true;
    },
    onChangeProvince1: function (a) {
      this.ssxObject.province = a.value;
      if (a.value == '台湾省') {
        this.showSsxPick = false;
      }
    },
    onChangeCity: function (a) {
      this.ssxObject.city = a.value;
    },
    onChangeArea: function (a) {
      if (a.value != '区') {
        this.ssxObject.area = a.value;
        this.showSsxPick = false;
        this.currentPerson.hjdz = this.ssxObject.province + '/' + this.ssxObject.city + '/' + this.ssxObject.area;
      }
    },
    yearOldJudge: (idCard) => {
      const year = idCard.substring(6, 10);
      const month = idCard.substring(10, 12);
      var yearOld = new Date().getFullYear() - year;
      if (parseInt(month) - 1 >= new Date().getMonth()) {
        yearOld--;
      }
      var gender = parseInt(idCard.substring(16, 17)) % 2;
      return {
        nl: yearOld,
        xb: gender ? '男' : '女'
      };
    },
    deletePerson: function (index) {
      this.item.txry.splice(index, 1);
    },
    addNewPerson: function () {
      this.item.txry.push({
        sfz: '',
        xm: '',
        dh: '',
        dw: '',
        hjdz: '',
        pid: '',
        prelation: '',
        ssxObject: {province: '', city: '', area: ''}
      });
    },
    reset: function () {
      this.address_1 = '';
      this.address_2 = '';
      this.address_3 = '';
      this.address_4 = '';
      this.address_5 = [];

      this.item = {
        address: '',
        fdxm: '',
        fddh: '',
        xm: '',
        sfz: '',
        dh: '',
        dw: '',
        hjdz: '',
        ssxObject: {province: '', city: '', area: ''},
        txry: []
      };
    },
    save: function () {
      var vm = this;
      var params = JSON.parse(JSON.stringify(this.item));
      params.txry.forEach(person => {
        person.address = vm.item.address;
        person.fdxm = vm.item.fdxm;
        person.fddh = vm.item.fddh;
        person.pid = vm.item.sfz;
      });
      console.log(params);
      let validateArr = [
        {p: params.address, p1: '房屋地址', p2: '填写'},
        {p: params.xm, p1: '住户姓名', p2: '填写'},
        {p: params.sfz, p1: '住户身份证', p2: '填写'},
        {p: params.hjdz, p1: '住户户籍地址', p2: '选择'},
        {p: params.dh, p1: '住户电话', p2: '填写'}
      ];
      for (let n of validateArr) {
        if (n) {
          let error = vm.$util.requireValidator(n.p, n.p1, n.p2);
          if (error) {
            vm.$vux.toast.text(error, 'bottom');
            return;
          }
        }
      }
      // 判断地址
      if (params.address.includes('?')) {
        vm.$vux.toast.text('请将地址信息填写完整', 'bottom');
        return;
      }
      // 身份证号码判断
      if (!vm.$util.identityCodeValid(params.sfz)) {
        vm.$vux.toast.text('住户身份证格式不正确', 'bottom');
        return;
      }
      let e = vm.$util.mobileValidator(params.dh);
      if (e) {
        vm.$vux.toast.text(e, 'bottom');
        return;
      }
      for (let [ index, person ] of params.txry.entries()) {
        let validateArr = [
          {p: person.prelation, p1: '关系', p2: '选择'},
          {p: person.xm, p1: '姓名', p2: '填写'},
          {p: person.sfz, p1: '身份证', p2: '填写'},
          {p: person.hjdz, p1: '户籍地址', p2: '选择'}
        ];
        for (let n of validateArr) {
          if (n) {
            let error = vm.$util.requireValidator(n.p, n.p1, n.p2);
            if (error) {
              vm.$vux.toast.text('同行人员' + (index + 1) + ':' + error, 'bottom');
              return;
            }
          }
        }
        if (!vm.$util.identityCodeValid(person.sfz)) {
          vm.$vux.toast.text('同行人员' + (index + 1) + ':' + '身份证格式不正确', 'bottom');
          return;
        }
        if (person.sfz == params.sfz) {
          vm.$vux.toast.text('同行人员' + (index + 1) + ':' + '重复的信息', 'bottom');
          return;
        }
      }

      // if (1) {return;}
      vm.$vux.loading.show();
      var postObj = {
        others: params.txry.map(n => {
          return {
            houseAddress: n.address,
            houseName: n.fdxm,
            housePhone: n.fddh,
            // "id: 0,
            // "idToStr: "string",
            // parentId: n.pid,
            parentLink: n.prelation,
            tenantAddress: n.hjdz,
            tenantCompany: n.dw,
            tenantId: n.sfz,
            tenantName: n.xm,
            tenantPhone: n.dh
          };
        }),
        tripInfo: {
          houseAddress: params.address,
          houseName: params.fdxm,
          housePhone: params.fddh,
          // "id: 0,
          // "idToStr: "string",
          parentId: '',
          parentLink: '',
          tenantAddress: params.hjdz,
          tenantCompany: params.dw,
          tenantId: params.sfz,
          tenantName: params.xm,
          tenantPhone: params.dh
        }
      };
      vm.$paramPost('trip/info/add', postObj, function (data) {
        vm.$vux.loading.hide();
        if (data && data.code == '200') {
          vm.$emit('refresh');
          vm.$vux.alert.show({
            title: '提示',
            content: '保存成功！',
            onHide () {
              vm.$router.push({path: '/'});
            }
          });
        } else {
          vm.$vux.toast.text(data.message || '新增失败', 'bottom');
        }
      }, false);
    }

  },
  mounted: function () {
  }
};
</script>

<style lang="scss" scoped>
.visualBlock {
  background: #fff;
}
.main-scroll{
  width: 100%;
}
.infoitem {
  padding: 10px;
  .len {
    margin-bottom: 8px;
    .f1 {
      .inputvalue, select {
        width: 100%;
        height: 32px;
        font-size: 14px;
      }
      .value {
        line-height: 32px;
        background: white;
        margin-top: 3px;
        min-height: 32px;
      }
    }
  }
}
.img-uploads {
  /deep/ .cacheArea {
    flex-wrap: wrap;
    .item {
      margin-right: calc(33.3% - 100px);
      margin-bottom: 5px;
    }
  }
  .imgitem {
    img {
      max-width: 100%;
    }
  }
}
.title1 {
  background: #e6e6e6;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 5px;
  color: #4c62c3;
}
.title2 {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.backText {
  padding: 10px;
  font-size: 12px;
}
.ryc3 {
  border-top: #d8d8d8 1px solid;
}
label {
  max-width: 230px;
  &.require {
    &.orange {
      &::before {
      color: orange;
    }
    }
    &::before {
      content: '*';
      color: red;
    }
  }
}
.ccheckbox {
  height: unset !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  label {
    margin: 0 10px 0 5px;
  }
}
.scrollBody {
  position: fixed;
  top: 40px;
}
.img-uploads {
  padding: 5px;
  .key {
    line-height: 30px;
  }
  /deep/ .cacheArea {
    flex-wrap: wrap;
    margin-left: 15px;
    .item {
      margin-right: calc(33.3% - 100px);
      margin-bottom: 20px;
    }
  }
}
.ryca {
  border-bottom: #d8d8d8 1px solid;
  color: #808080;
  line-height: 25px;
  label {
    padding: 10px;
  }
}
.ryc4 {
  width: 120px;
  .ryc_btn {
    background: #ff8f31;
    height: 30px;
    margin: 10px;
  }
}
.ryc5 {
  display: flex;
  height: 50px;
  align-items: center;
  flex-direction: row-reverse;
  .ryc_btn {
    background: #ff0000;
    height: 30px;
    width: 120px;
    margin-right: 20px;
  }
}
.persons {
  .person {
    border-bottom: #d8d8d8 3px solid;
    .title {
      padding: 10px;
    }
  }
}
.expand {
  background: #c1daff;
  color: #fefdfd;
  text-align: center;
}
/*遮罩层*/
.blacks {
  position: fixed;
  width: 100%;
  height: 50%;
  z-index: 200;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
}
/*省市区三级联动*/
.divwrap {
  height: 50%;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 199;
}

/*外部*/
.divwrap > .distpicker-address-wrapper {
  color: #0d0d0d;
  height: 100%;
}

/*头部内容*/
.divwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}

/*内容部分*/
.divwrap >>> .address-container {
  overflow: scroll;
  height: 100%;
}

/*点过的地区内容*/
.divwrap >>> .address-container .active {
  color: red;
}

.inxxx {
  display: flex;
  width: 40%;
  margin: 5px;
  align-items: center;
  input, select {
    height: 25px;
    width: 100px;
  }
}
.flex-item {
  display: flex;
  align-items: center;
}
</style>
